﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection" />
    <title>每日业绩报表Tab</title>
    <script src="js/jquery/jquery-1.8.1.min.js" type="text/javascript"></script>
    <script src="js/config.js" type="text/javascript" charset="utf-8"></script>
    <link href="css/style.css" rel="stylesheet" type="text/css" charset="utf-8" />
    <link href="css/btnsty.css" rel="stylesheet" type="text/css" charset="utf-8" />
    <link href="css/editform.css" rel="stylesheet" type="text/css" charset="utf-8" />
    <link href="css/global.css" rel="stylesheet" type="text/css" charset="utf-8" />
    <script src="js/Toast.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8" src="js/barcodescanner.js"></script>
    <script src="js/laydate.js" type="text/javascript"></script>
    <script src="js/Gvtools.js" type="text/javascript"></script>
    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        body
        {
            font-size: 12px;
            color: #666;
            text-align: left;
        }
        h1
        {
            text-align: center;
        }
        
        .tabbox
        {
            width: 100%;
            height: 100%;
            background: #f0f0f0;
            font-family: '微软雅黑';
        }
        .tabbox .tab
        {
            overflow: hidden;
            background: #ccc;
            position: absolute;
            bottom: 0;
            padding:0px;
            margin:0px;
            width: 100%;
        }
        .tabbox .tab a
        {
            display: block;
            width:33.3333%;
            height:38px;
            line-height: 38px;
            text-align:center;
            float: left;
            text-decoration: none;
            color: #333;
            border-top: 3px solid  rgb(46, 85, 142);
        }
        /*.tabbox .tab a:hover
        {
            background: #E64E3F;
            color: #fff;
            text-decoration: none;
             border-top: 5px solid black;
        }*/
        .tabbox .tab a.on
        {
            background: #E64E3F;
            color: #fff;
            text-decoration: none;
            border-top: 3px solid black;
        }
        .tabbox .content
        {
            overflow: hidden;
            height: 100%;
        }
        .tabbox .content li
        {
            display: none;
            bottom: 50px;
        }
        
        .ylmenu
        {
            width: 100%;
            clear: both;
            margin: 0;
            padding: 0;
            list-style: none;
            background: url(./images/menubg.png) repeat-x scroll 0 0;
            display: block;
            height: 43px;
            position: absolute;
            bottom: 0px;
        }
        .ylmenu li
        {
            float: left;
            width: 33.3333%;
            height: 43px;
            background: transparent url(./images/menulibg.png) no-repeat right top;
            line-height: 43px;
        }
        .ylmenu li a
        {
            display: block;
            height: 43px;
            color: #ccc;
            text-align: center;
            text-decoration: none;
            font-family: "微软雅黑";
            font-size: 16px;
        }
        u</style>
    <script type="text/javascript" charset="utf-8">
        $(function () {
            GetStockList();
            laydate.skin('molv'); //切换皮肤，请查看skins下面皮肤库
            $(".q-btn").live("click", function () {
                QureryData();
            });
            //SetGvFloat("mytab");
        });
        function GetStockList() {
            USER_ID = localStorage.getItem("UserID");
            $.ajax({
                url: url_path + "/ajaxdata/Default.aspx",
                type: "POST",
                data: { aciton: 'GetShopList', userid: USER_ID },
                timeout: 30000,
                dataType: "text",
                success: function (data) {
                    var msg = $.trim(data);
                    if (msg == "NO_DATA") {
                        alert("您没有任何店仓权限，请联系管理员！");
                    } else {
                        var orderObj = JSON.parse(msg);
                        var html = "<option value='0'>全部</option>";
                        for (var i = 0; i < orderObj.length; i++) {
                            html += '<option value="' + orderObj[i].shopid + '">' + orderObj[i].shopname + '</option>'
                        }
                        $("#shoplist").html(html);
                        $("#shoplist").selectindex = 0;
                    }
                },
                error: function () {
                    showtoast("通讯超时,请检查网络.", null, 100, 100);
                }
            });
        }
        function QureryData() {
            $("#loading-mask").show();
            $.ajax({
                url: url_path + "/ajaxdata/Default.aspx",
                type: "POST",
                data: { aciton: 'KM_DailyPayAmt_rpt', sdate: $("#txtdate").val(), shopid: $("#shoplist option:checked").val() },
                timeout: 30000,
                dataType: "text",
                success: function (data) {
                    var msg = $.trim(data);
                    if (msg == "NO_DATA") {
                        showtoast("没有数据显示!", null, null, null);
                    } else {
                        var orderObj = JSON.parse(msg);
                        var html = "";
                        var html2 = "";
                        var html3 = "";
                        for (var i = 0; i < orderObj.length; i++) {
                            html += '<tr>'
                                    + '<td>' + orderObj[i].orderid + '</td>'
                                    + '<td>' + orderObj[i].shopname + '</td>'
                                    + '<td>' + orderObj[i].payamt + '</td>'
                                    + '<td>' + orderObj[i].upayamt + '</td>'
                                  + '</tr>'
                            html2 += '<tr>'
                                    + '<td>' + orderObj[i].orderid + '</td>'
                                    + '<td>' + orderObj[i].shopname + '</td>'
                                    + '<td>' + orderObj[i].payamt + '</td>'
                                    + '<td>' + orderObj[i].kdjrate + '</td>'
                                    + '<td>' + orderObj[i].kdj + '</td>'
                                  + '</tr>'
                            html3 += '<tr>'
                                    + '<td>' + orderObj[i].orderid + '</td>'
                                    + '<td>' + orderObj[i].shopname + '</td>'
                                    + '<td>' + orderObj[i].payamt + '</td>'
                                    + '<td>' + orderObj[i].allpayamt + '</td>'
                                    + '<td>' + orderObj[i].targetmoney + '</td>'
                                    + '<td>' + orderObj[i].wcl + '</td>'
                                    + '<td>' + orderObj[i].mrate + '</td>'
                                  + '</tr>'
                        }
                        $("#rptdata").html(html);
                        $("#rptdata2").html(html2);
                        $("#rptdata3").html(html3);
                        $("#loading-mask").hide();
                    }
                },
                error: function () {
                    $("#loading-mask").hide();
                    showtoast("通讯超时,请检查网络.", null, 100, 100);
                }
            });
        }
    </script>
</head>
<body>
    <!-- 代码部分begin -->
    <div id="header" class="head">
        <div class="wrap">
            <i class=" menu_back2"><a href="index.html"></a></i>
            <div class="title">
                <span class="title_d">
                    <p>
                        每日业绩报表Tab</p>
                </span>
                <div class="clear">
                </div>
            </div>
        </div>
        <div class="logo_msk">
        </div>
    </div>
    <div class="tabbox">
        <div class="content">
            <ul>
                <li style="display: block;">
                    <div style="border: 1px solid #DEE1E6; bottom: 40px; position: absolute; top: 50px;
                        left: 0px; right: 0px; padding: 2px;">
                        <div id="oct" style="background: #fff; height: 100%; width: 100%; overflow: auto;">
                            <div style="position: relative; width: 100%; height: 35px;">
                                <div class="fl">
                                    日期：<input class="laydate-icon" id="txtdate" value="" onclick="laydate({ elem: '#txtdate' });"></div>
                                <div class="fl">
                                    店铺：<select class="ipt select" id="shoplist">
                                        <option value="0">数据加载中...</option>
                                    </select>
                                    <a class="q-btn" href="#">获取数据</a></div>
                            </div>
                            <div style="height: 100%; width: 100%;">
                                <table id="mytab" class="tb" style="width: 100%;">
                                    <thead>
                                        <tr>
                                            <th style="width: 50px;">
                                                排名
                                            </th>
                                            <th style="width: 200px;">
                                                店铺名称
                                            </th>
                                            <th style="width: 100px;">
                                                当日业绩（元）
                                            </th>
                                            <th style="width: 150px;">
                                                上周同比
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody id="rptdata">
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div style="border: 1px solid #DEE1E6; bottom: 40px; position: absolute; top: 50px;
                        left: 0px; right: 0px; padding: 2px;">
                        <div style="height: 100%; width: 100%; overflow: auto;">
                            <table id="mytab2" class="tb" style="width: 100%; height: 100%;">
                                <thead>
                                    <tr>
                                        <th style="width: 50px;">
                                            排名
                                        </th>
                                        <th style="width: 200px;">
                                            店铺名称
                                        </th>
                                        <th style="width: 100px;">
                                            当日业绩（元）
                                        </th>
                                        <th style="width: 80px;">
                                            连带率
                                        </th>
                                        <th style="width: 80px;">
                                            客单价
                                        </th>
                                    </tr>
                                </thead>
                                <tbody id="rptdata2">
                                </tbody>
                            </table>
                        </div>
                    </div>
                </li>
                <li>
                    <div style="border: 1px solid #DEE1E6; bottom: 40px; position: absolute; top: 50px;
                        left: 0px; right: 0px; padding: 2px;">
                        <div style="height: 100%; width: 100%; overflow: auto;">
                            <table id="mytab3" class="tb" style="width: 100%; height: 100%;">
                                <thead>
                                    <tr>
                                        <th style="width: 50px;">
                                            排名
                                        </th>
                                        <th style="width: 200px;">
                                            店铺名称
                                        </th>
                                        <th style="width: 100px;">
                                            当日业绩（元）
                                        </th>
                                        <th style="width: 100px;">
                                            本月业绩
                                        </th>
                                        <th style="width: 100px;">
                                            目标业绩
                                        </th>
                                        <th style="width: 60px;">
                                            完成率
                                        </th>
                                        <th style="width: 60px;">
                                            时间比
                                        </th>
                                    </tr>
                                </thead>
                                <tbody id="rptdata3">
                                </tbody>
                            </table>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="tab">
            <a href="javascript:;" class="on">当日销售</a> <a href="javascript:;">连带率</a> <a href="javascript:;">
                完成情况</a>
        </div>
        <!--        <ul class=" ylmenu">
            <li><a href="#">当日销售</a></li>
            <li><a href="#">连带率</a></li>
            <li><a href="#">完成情况</a></li>
        </ul>-->
        <div id='loading-mask'>
            <div id="loading">
                <div class="loading-indicator">
                    <img src="images/0504317.gif" width="48" height="48" />
                    <br />
                    <span id="loading-msg">数据加载中...</span>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(function () {
            $(".tabbox .tab a").live("click", function () {
                $(this).addClass('on').siblings().removeClass('on');
                var index = $(this).index();
                number = index;
                $('.tabbox .content li').hide();
                $('.tabbox .content li:eq(' + index + ')').show();
            });

            var auto = 1;  //等于1则自动切换，其他任意数字则不自动切换
            if (auto == 1) {
                var number = 0;
                var maxNumber = $('.tabbox tab a').length;
                function autotab() {
                    number++;
                    number == maxNumber ? number = 0 : number;
                    $('.tabbox tab a:eq(' + number + ')').addClass('on').siblings().removeClass('on');
                    $('.tabbox .content ul li:eq(' + number + ')').show().siblings().hide();
                }
                //                var tabChange = setInterval(autotab, 3000);
                //                //鼠标悬停暂停切换
                //                $('.tabbox').mouseover(function () {
                //                    clearInterval(tabChange);
                //                });
                //                $('.tabbox').mouseout(function () {
                //                    tabChange = setInterval(autotab, 3000);
                //                });
            }
        });
    </script>
    <!-- 代码部分end -->
</body>
</html>
